<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .controls .area {
        width: 870px;
        height: 100px;
        resize: none;
        border-radius: 10px;
        outline: none;
        padding-left: 20px;
        padding-top: 10px;
        font-size: 18px;
    }

    .controls div .useCount {
        color: red;
    }

    button {
        background: skyblue;
        /* border: 0; */
    }
</style>

<body>
    <div class="w">
        <div class="controls">
            <textarea cols="30" rows="10" id="area" maxlength="200" placeholder="说点什么吧..."></textarea>
            <div>
                <span class="useCount">0</span>
                <span>/</span>
                <span>200</span>
                <button id="send">发布</button>
            </div>
        </div>
    </div>
    <script>
        let area = document.querySelector('#area')
        let useCount = document.querySelector('.useCount')
        area.addEventListener('input', function () {
            // 不断得到文本域里面的字符长度
            // area.value得到值
            // area.value.length得到字符的长度
            useCount.innerHTML = area.value.length
        })
    </script>
</body>

</html>